<template>
  <div class="news-details">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">最新动态-动态详情</div>
    <div class="news-padding">
      <div class="news-details-tile">{{content.title}}</div>
      <div class="news-details-source">原创： Pergo <span>{{date}}</span></div>
      <div class="content" v-html="content.contents"></div>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
  import {
    getNewsDetails,
  } from '@/api/index'
  export default {
    name: 'newsDetails',
    data() {
      return {
        type: this.$route.query.type ? this.$route.query.type : 0,
        content: {},
        date: null
      }
    },
    created() {
      this.$vux.loading.show({
        text: 'Loading'
      })
      let id = this.$route.query.id ? this.$route.query.id : 0
      getNewsDetails({
        id: id
      }).then((res) => {
        const {
          code,
          msg,
          data
        } = res
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 500)
        if (code == 200) {
          this.date = this.formatDateTime(data.row.create_time)
          this.content = data.row
        }
      })
    },
    methods: {
      getType(type) {
        this.type = type
      },
      formatDateTime(UnixTime) {
        var date = new Date(parseInt(UnixTime) * 1000);
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return `${m}月${d}日`
      }
    },
  }
</script>
<style scoped>
  .content>>>img {
    max-width: 100%;
  }
</style>
<style lang="less" scoped>
  .news-padding {
    padding: 0.36rem 0.21rem;

    .news-details-tile {
      font-size: 0.36rem;
      font-weight: bold;
      margin-bottom: 0.18rem;
    }

    .news-details-source {
      color: #b3b3b3;
    }
  }
</style>
